import React, { Component } from 'react';
import {connect} from 'react-redux'
import moment from 'moment'
import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import {
  Form,
  Input,
  InputNumber,
  Cascader,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
  AutoComplete,
  message,
  Modal,
  Popover,
  Spin,
  DatePicker
} from 'antd';

// 引入自定义的组件
// 引入自定义操作
import { ChangeUserinfoActivate, SendTaskSaga, UpdateUserPasswdSaga } from '../../../../redux/actions/userinfo'
import { ChangeSpinACtivate } from '../../../../redux/actions/public';

import { ChangeMasterTasksDataActivate, UpdateMasterTaskSaga } from '../../../../redux/actions/taskMasterManagePage';

const { Option } = Select;

// 类似样式，调节方框的距离
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 6,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,
    },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

class UpdateUserPasswdForm extends Component {

  state = {
    enddate: '',
  }


  // 点击修改按钮
  onFinish = (values) => {
    const { baseUserInfoState, UpdateUserPasswdSaga } = this.props
    const passwd_data = Object.assign(
      {}, 
      values, 
      {
        email: baseUserInfoState.email, 
        username: baseUserInfoState.username
      })
    console.log("passwd_data is ", passwd_data)
    UpdateUserPasswdSaga(passwd_data)
  };

  // 钩子
  componentDidUpdate(){
    const { userinfoState, ChangeUserinfoActivate } = this.props
    if (userinfoState.msg.length !== 0){
      if (userinfoState.msg === "success") {
        message.success("任务修改成功, 请等待审核")
        ChangeUserinfoActivate({msg: ''})
      } else{
        message.error("任务修改失败, 请检查网络")
      }
    } 
  }
  // 获取时间
  handleDate = (e) => {
      const date = moment(e).format('YYYY-MM-DD')
      this.setState({enddate: date})
  }


  render(){
    const { SpinState, baseUserInfoState, UpdateTaskMMPState } = this.props
    return (
      <Form
        {...formItemLayout}
        name="task"
        onFinish={this.onFinish}
        scrollToFirstError
      >
        <Form.Item
          name="oldPasswd"
          label="老的密码"
          initialValue={UpdateTaskMMPState.tasktitle}
          rules={[
            {
              required: true,
              message: '请输入您的密码!',
            },
            {
                max: 200,
                message: '您输入的密码过长，请限定在200个字符',
            }
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name="password"
          label="新的密码"
          initialValue={UpdateTaskMMPState.taskintro}
          rules={[
            {
                required: true,
                message: '请输入您的密码!',
              },
              {
                max: 200,
                message: '您输入的密码过长，请限定在200个字符',
              },
          ]}
          hasFeedback
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="confirm"
          label="确认密码"
          initialValue={UpdateTaskMMPState.typeid}
          dependencies={['password']}
          hasFeedback
          rules={[
            {
                required: true,
                message: '请再次输入您的密码!',
              },
              {
                max: 200,
                message: '您输入的确认密码过长，请限定在200个字符',
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
  
                  return Promise.reject(new Error('您现在输入的密码和上次输入的密码不相同!'));
                },
              }),
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Spin spinning={ SpinState.sendTask_activate } tip="密码修改中......">
          <Form.Item {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Spin>
      </Form>
    );
  }
};

export default connect(
  state => ({
    SpinState: state.PublicReducer.spinState,
    baseUserInfoState: state.PublicReducer.baseUserInfo,
    userLoginState: state.PublicReducer.userLoginState,
    userinfoState: state.UserInfoReducer.userinfo,

    UpdateTaskMMPState: state.TaskMasterManagePageReducer.updateTask,
  }),
  {
    ChangeUserinfoActivate,
    SendTaskSaga,
    ChangeSpinACtivate,

    ChangeMasterTasksDataActivate,
    UpdateMasterTaskSaga,

    UpdateUserPasswdSaga
  }
)(UpdateUserPasswdForm) 